<template>
    <!-- home组件的导航栏组件 -->
  <div class="input-nav">
      <div class="input-nav-box">
          <div class="input-nav-item">
                <div class="input-nav-item-left iconfont icon-zujian-icon-32" @click="showMe" >
                    <!-- <img class="auto-img"  src="../../assets/images/search.png" alt=""> -->
                </div>
                <div class="input-nav-item-title"></div>
          </div>
          <div class="input-nav-item-ipt">
                <i class="fa fa-search" aria-hidden="true"></i>
                <input class="search" type="text" placeholder="请输入音乐或歌手名称"
                @click="add"
               >
                
                <i class="fa fa-times-circle" aria-hidden="true"
                ></i>

          </div>
          <!-- <div class="input-nav-item-right" @click="jumpLogin">
              <i class="fa fa-user-circle" aria-hidden="true"></i>
          </div> -->
      </div>
  </div>
</template>

<script>
export default {
    name: 'InputNav',
    data() {
        return {
        }
    },
    created(){
        
    },
    methods: {
        //调用父组件的方法
        add() {
            this.$emit('nav-tab');
        },
        // 显示个人中心
        showMe() {
            this.$emit('nav-show');
        },
        //跳转登录页面
        jumpLogin(){
            let login=window.localStorage.getItem('login');
            //若没登录
            if(!login) {
                this.$router.push({path:'/login'});
            }else{
                this.$router.push({path:'/userInfo'});
            }
        }
        
        
    }
    
}
</script>

<style lang='less' scoped>
@import url('../../assets/css/base.less');

    .auto-img {
        height:100%;
    }
    .input-nav-box {
        background-color: @mainColor;
        height:54px;
        line-height: 54px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .input-nav-item {
            flex: 1;
            display: flex;
            align-items: center;
            font-weight: bold;
            .input-nav-item-left {
                width:30px;
                height:30px;
                line-height:30px;
                font-size: 18px;
                margin-right: 10px;
                color:#fff;
                // img{
                //     background-color: bisque;
                // }
            }
            .input-nav-item-title {
                font-size: 14px;
                font-weight:bold;
                color:@mainColor;
            }
        }
        .input-nav-item-ipt {
            width:80%;
            height:32px;
            font-size: 14px;
            background-color: #F7F8FA;
            border-radius: 32px;
            border:0;
            outline: none;
            overflow: hidden;
            position: relative;
            top:calc(50% - 26px);
            .fa-search {
                position: absolute;
                left:15px;
                top:calc(50% - 8px);
                z-index:999;
                color:@mainColor;
                background-color: #F7F8FA;

            }
            .search {
                width:100%;
                height:32px;
                border:none;
                outline: none;
                position: absolute;
                left:0px;
                padding: 0 35px;
                background-color: #F7F8FA;

            }
            .fa-times-circle{
                position: absolute;
                right: 0;
                margin-right: 10px;
                top: calc(50% - 8px);
                padding-right: 0;
                z-index: 999;
                color: @mainColor;
                font-size: 16px;
                }
        }
        .input-nav-item-right{
            width:30px;
            height:30px;
            margin-left: 15px;
            font-size:28px;
            line-height:30px;
            color:wheat;
        }
    }

</style>